<template>
    <div class="rootContainer">
      <div style="width: 100%; background-color: dimgray;height: 50px;margin-bottom: 20px;">
        <el-page-header @back="goBack" content="返回工具菜单" style="margin-top: 10px;float: left;"></el-page-header>
        <el-button type="primary" @click="changeDB" style="float: left;width: 140px;margin-left: 40px;margin-top: 5px;" round>切换数据库</el-button>
      </div>
      <div class="createDataContainer">
        <el-form ref="form" label-width="160px">
          <el-form-item label="路径名称：">
            <el-input v-model="createDBTxtData.basePath" class="inputBox"></el-input>
          </el-form-item>
          <el-form-item label="文件名称：">
            <el-input v-model="createDBTxtData.fileName" class="inputBox"></el-input>
          </el-form-item>
          <el-form-item label="文件类型：">
            <el-select v-model="createDBTxtData.fileType" placeholder="请选择" class="inputBox">
              <el-option
                v-for="item in createDBTxtList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btnContainer">
          <el-button type="primary" @click="createDBTxt" round>生成文件</el-button>
        </div>
      </div>

      <div style="border: 1px solid black; border-radius: 10px">
        <div class="container">
          <h2>数据库表列表</h2>
        </div>
        <div style="margin-bottom: 30px">
          <div style="margin-top: 20px;text-align: left; margin-left: 20px;">
            <el-button type="success" size="mini" @click="selectAll" round>全选</el-button>
            <el-button type="info" size="mini" @click="cancelAll" round>全部取消</el-button>
            数据库表名称：<el-input type="text" v-model="inputTableName" style="width: 200px;"></el-input>
            <el-button @click="filterTable" style="width: 100px;">筛选</el-button>
          </div>
        </div>
        <el-checkbox-group v-model="checkedTableList" class="container">
          <el-checkbox v-for="tableName in tableNameList" :label="tableName" :key="tableName" class="tableNameTab" border>{{ tableName }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
</template>

<script>
    import {get} from "../../utils/httpUtil";

    export default {
        name: "CreateDBTxt"
      ,data() {
          return {
            backUrl: '/dbToolMenu'
            ,changeDBUrl: '/'
            ,createDBTxtData: {
              basePath:"E:/temp"
              ,fileName:"dbTxt"
              ,fileType:".txt"
              ,selectedTables: ""
            }
            ,createDBTxtList: [{
              value: '.txt',
              label: '.txt'
            }, {
              value: '.md',
              label: '.md'
            }]
            ,tableNameList:[]
            ,checkedTableList:[]
            ,fullTableNameList:[]
            ,inputTableName:""
          }
      }
      ,methods: {
        goBack() {
          this.toPage(this.backUrl)
        }
        ,changeDB() {
          this.toPage(this.changeDBUrl)
        }
        ,toPage(url) {
          this.$router.push(url)
        }
        ,createDBTxt() {
          // 设置选中的表
          let selectedTableStr = ",";
          for (let i in this.checkedTableList) {
            let item = this.checkedTableList[i]
            selectedTableStr = selectedTableStr + item + ","
          }
          this.createDBTxtData.selectedTables = selectedTableStr
          // 生成文件
          get("/createDBTxt/createDBTxt", this.createDBTxtData).then(response => {
            if (response.data.result) {
              this.$message({
                message: '生成数据库文件成功！',
                type: 'success'
              });
            } else {
              this.$message({
                message: '生成数据库文件失败！' + response.data.msg,
                type: 'error'
              });
            }
          })
        }
        ,selectAll() {
          let tableList = this.tableNameList
          let l = tableList.length
          this.checkedTableList.splice(0, this.checkedTableList.length)
          for (let i=0; i< l; i++) {
            this.checkedTableList.push(tableList[i])
          }
        },
        cancelAll() {
          this.checkedTableList.splice(0, this.checkedTableList.length)
        },
        filterTable() {
          this.tableNameList.splice(0, this.tableNameList.length)
          this.checkedTableList.splice(0, this.checkedTableList.length)
          this.fullTableNameList.forEach(item => {
            let currentName = item.toLowerCase()
            if (currentName.indexOf(this.inputTableName) != -1) {
              this.tableNameList.push(item)
            }
          })
        },
        getTableList() {
          get("/db/getTableList", {}).then(response => {
            let tableList = response.data.data
            // 清空数据
            this.tableNameList.splice(0, this.tableNameList.length)
            this.fullTableNameList.splice(0, this.fullTableNameList.length)
            // 封装数据
            for (let i in tableList) {
              let item = tableList[i]
              this.tableNameList.push(item.tableName)
              this.fullTableNameList.push(item.tableName)
            }
          })
        }
      }
      ,created() {
          this.getTableList()
      }
    }
</script>

<style scoped>
  .createDataContainer {
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .rootContainer {
    width: 100%;
  }
  .inputBox {
    width: 250px;
  }
  .btnContainer {
    text-align: center;
  }
  .tableNameTab{
    font-weight: bold;
    margin-bottom: 10px;
  }
  .container {
    text-align: center;
    padding-left: 20px;
  }
</style>
